import Taro, { Component } from "@tarojs/taro";
import { View } from "@tarojs/components";
import ChartDoc from "./chart";
import "./index.less";

class Chart extends Component {
  state = {
    type: 7,
    dateBtn: [
      {
        title: "本周",
        type: 7,
        active: true
      },
      {
        title: "本月",
        type: 30,
        active: false
      },
      {
        title: "本季度",
        type: 90,
        active: false
      }
    ]
  };

  getChartData(dataArr, type) {
    let original = [
      {
        memo: "已提交",
        color: "#81D9E2",
        const: "const"
      },
      {
        memo: "已预约",
        color: "#6FC1F3",
        const: "const"
      },
      {
        memo: "已到司",
        color: "#FAA24B",
        const: "const"
      },
      {
        memo: "已成单",
        color: "#F96470",
        const: "const"
      }
    ];
    const {
      cnt7,
      cnt7_1,
      cnt7_3,
      cnt7_4,
      cnt30,
      cnt30_1,
      cnt30_3,
      cnt30_4,
      cnt90,
      cnt90_1,
      cnt90_3,
      cnt90_4
    } = dataArr;
    switch (type) {
      case 7:
        const total7 = cnt7 + cnt7_1 + cnt7_3 + cnt7_4;
        original[0].amount = cnt7;
        original[0].ratio = parseFloat((cnt7 / total7).toFixed(2));
        original[1].amount = cnt7_1;
        original[1].ratio = parseFloat((cnt7_1 / total7).toFixed(2));
        original[2].amount = cnt7_3;
        original[2].ratio = parseFloat((cnt7_3 / total7).toFixed(2));
        original[3].amount = cnt7_4;
        original[3].ratio = parseFloat((cnt7_4 / total7).toFixed(2));
        break;
      case 30:
        const total30 = cnt30 + cnt30_1 + cnt30_3 + cnt30_4;
        original[0].amount = cnt30;
        original[0].ratio = parseFloat((cnt30 / total30).toFixed(2));
        original[1].amount = cnt30_1;
        original[1].ratio = parseFloat((cnt30_1 / total30).toFixed(2));
        original[2].amount = cnt30_3;
        original[2].ratio = parseFloat((cnt30_3 / total30).toFixed(2));
        original[3].amount = cnt30_4;
        original[3].ratio = parseFloat((cnt30_4 / total30).toFixed(2));
        break;
      case 90:
        const total90 = cnt90 + cnt90_1 + cnt90_3 + cnt90_4;
        original[0].amount = cnt90;
        original[0].ratio = parseFloat((cnt90 / total90).toFixed(2));
        original[1].amount = cnt90_1;
        original[1].ratio = parseFloat((cnt90_1 / total90).toFixed(2));
        original[2].amount = cnt90_3;
        original[2].ratio = parseFloat((cnt90_3 / total90).toFixed(2));
        original[3].amount = cnt90_4;
        original[3].ratio = parseFloat((cnt90_4 / total90).toFixed(2));
        break;
      default:
        break;
    }
    return original
  }

  changeChartBtn(i) {
    const { dateBtn } = this.state;
    dateBtn.map((item,index) => {
      if (index === i) {
        item.active = true;
      } else {
        item.active = false;
      }
    })
    this.setState({
      dateBtn,
      type:dateBtn[i].type
    })
  }

  render() {
    const { dataArr } = this.props;
    const { type, dateBtn } = this.state;
    const chartData = this.getChartData(dataArr, type)
    return (
      <View className="customer-chart">
        <View className="chart-title">销售统计</View>
        <View className="chart-con">
          <View className="change-mode">
            {dateBtn.map((item, index) => (
              <View
                className={{ "chart-mode": true, active: item.active }}
                onClick={this.changeChartBtn.bind(this,index)}
              >
                {item.title}
              </View>
            ))}
          </View>
          <ChartDoc data={chartData} />
        </View>
      </View>
    );
  }
}
export default Chart;
